<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item label="姓名">
        <el-input v-model="listQuery.text" placeholder="请输入姓名，回车搜索" @keyup.enter.native="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-form-item>
      <el-button type="primary" @click="handleBatchAdd">批量添加白名单</el-button>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-table v-loading="listLoading" :data="tableData" border fit stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column label="用户名" prop="name" />
          <el-table-column label="创建时间" prop="time" />
          <el-table-column width="200" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="handleToAdd(scope.row)">添加白名单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-sizes="[20, 30, 50, 80]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { selectUser } from '@/api/basic/user'
export default {
  name: 'User',
  data() {
    return {
      listLoading: false,
      multipleSelection: [],
      pageCount: 0,
      tableData: [],
      listQuery: {
        text: '',
        pageVO: {
          pageIndex: 1,
          pageSize: 20
        }
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      this.listLoading = true
      var data = [
        { no: '1', name: '简务帅', time: '2022.12.05' },
        { no: '2', name: '郭山彤', time: '2022.12.05' },
        { no: '3', name: '虞信品', time: '2022.12.05' },
        { no: '4', name: '初夏', time: '2022.12.05' },
        { no: '5', name: '梁敦厦', time: '2022.12.05' },
        { no: '6', name: '晓丽', time: '2022.12.05' },
        { no: '7', name: '霍负浪', time: '2022.12.05' },
        { no: '8', name: '尔岚', time: '2022.12.05' },
        { no: '9', name: '马仁毅', time: '2022.12.05' },
        { no: '10', name: '冯州龙', time: '2022.12.05' }
      ]
      this.tableData = data
      this.pageCount = data.length
      this.listLoading = false
      // selectUser(this.listQuery).then(res => {
      //   this.tableData = res.data.rows
      //   this.pageCount = res.data.total
      // })
    },
    // 批量添加白名单
    handleBatchAdd() {
      if (this.multipleSelection.length === 0) {
        this.$message({ message: '请勾选需要添加白名单的用户！', type: 'warning' })
        return
      }
      const ids = []
      this.multipleSelection.forEach(row => {
        ids.push({ userName: row.name, userNo: row.no })
      })
      this.handleToAdd(ids)
    },
    // 保存多选数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 添加白名单
    handleToAdd(ids) {
      this.$confirm('添加白名单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doConfirm(ids)
      }).catch(() => {})
    },
    // 执行添加操作
    doConfirm(ids) {
      // addUser(this.loginForm).then(res => {
      //   if (res.success) {
      this.$message({ message: '添加成功', type: 'success' })
      //     this.search()
      //   }
      // })
    },
    // 点击分页条数选项
    handleSizeChange(val) {
      this.listQuery.pageVO.pageSize = val
      this.listQuery.pageVO.pageIndex = 1
      this.search()
    },
    // 点击跳转到指定分页
    handleCurrentChange(val) {
      this.listQuery.pageVO.pageIndex = val
      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
